<!-- 商城 - 公告组件 -->
<template>
	<view class="vk-mall-notice" v-if="listCom && listCom.length > 0">
		<u-notice-bar
			:mode="modeCom"
			:list="listCom"
			:is-circular="isCircularCom"
			:more-icon="false"
			duration="3000"
			@click="click"
		></u-notice-bar>
	</view>
</template>

<script>
export default {
	name: "vk-mall-notice",
	props: {
		// 云函数请求地址
		action: {
			Type: String,
			default:"client/pub.getIndexNotice"
		},
		actionData:{
			Type: Object
		},
		// 本地数据源(与action二选一)
		localdata: {
			Type: []
		},
		// 字段属性规则
		props: {
			Type: Object
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			loading: false,
			list: [],
			rows: []
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			let that = this;
			let { action, actionData, vk, propsCom: props } = that;
			// 请求带缓存
			vk.myfn.callFunctionForCache({
				url: action,
				loading: { name:"loading", that },
				data: actionData,
				success: (data) => {
					that.rows = data[props.list];
				}
			});
		},
		click(index) {
			let that = this;
			let { vk, propsCom: props } = that;
			let item = that.rowsCom[index];
			vk.navigateTo(`/pages/notice/list?_id=${item._id}`,);
		}
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {
		rowsCom() {
			return this.action ? this.rows : this.localdata;
		},
		listCom() {
			let that = this;
			let { propsCom: props, rowsCom: rows } = that;
			return rows.map((item, index) => {
				let text = item[props.title];
				let content = item[props.content].replace(/(<([^>]+)>)/ig, "");
				if (content) {
					text += `：${content}`
				}
				return text;
			});
		},
		propsCom() {
			let defaultProps = {
				list: "rows",
				title: "title",
				content: "content"
			};
			return Object.assign(defaultProps, this.props);
		},
		isCircularCom() {
			return this.list && this.list.length == 1;
		},
		modeCom() {
			return this.list && this.list.length == 1 ? "horizontal" : "vertical";
		}
	}
};
</script>

<style lang="scss" scoped></style>
